import React from 'react'
import { Card } from 'antd';
import ReactEcharts from 'echarts-for-react'

export default function Line(props) {

  const {data,months,types}=props

  const getOption=()=>{
    return {
      title: {
        text: '折线图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: types,
      left:'18%'
    },
    grid: {
      left: '5%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
          saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '邮件营销',
        type: 'line',
        stack: '邮件营销',
        data: data.map(i=>i.data[0].data.reduce((p,c)=>p+c))
      },
      {
        name: '联盟广告',
        type: 'line',
        stack: '联盟广告',
        data: data.map(i=>i.data[1].data.reduce((p,c)=>p+c))
      },
      {
        name: '视频广告',
        type: 'line',
        stack: '视频广告',
        data: data.map(i=>i.data[2].data.reduce((p,c)=>p+c))
      },
      {
        name: '直接访问',
        type: 'line',
        stack: '直接访问',
        data: data.map(i=>i.data[3].data.reduce((p,c)=>p+c))
      },
      {
        name: '搜索引擎',
        type: 'line',
        stack: '搜索引擎',
        data: data.map(i=>i.data[4].data.reduce((p,c)=>p+c))
      }
    ]
    }
  }

  return (
    <Card>
      <ReactEcharts option={getOption()}></ReactEcharts>
    </Card>
  )
}
